import React, { useRef } from 'react'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import ProTable from '@ant-design/pro-table'
import { connect} from 'umi'
import { queryProtocolList } from '../service'
import {protocolStatus} from "@/utils/constant";
import moment from 'moment'
import {formatNumber} from "@/utils/utils";

const TableList = () => {
  const actionRef = useRef();

  const columns = [
    {
      title: '序号',
      render:(text,record,index)=>`${index+1}`,
      hideInSearch: true,
    },
    {
      title: '工号',
      hideInSearch: true,
      dataIndex: 'code',
    },
    {
      title: '姓名',
      dataIndex: 'name',
      hideInSearch: true,
    },
    {
      title: '所属部门',
      hideInSearch: true,
      dataIndex: 'unitname',
    },
    {
      title: '所属岗位',
      dataIndex: 'jobname',
    },
    {
      title: '培训学杂费',
      dataIndex: 'trainingSpending',
      hideInSearch: true,
      render: (text) => {
        return (text != undefined ? formatNumber(text) : 0) + '元'
      },
    },
    {
      title: '往返交通住宿伙食费',
      dataIndex: 'trainingFoodSpending',
      hideInSearch: true,
      render: (text) => {
        return (text != undefined ? formatNumber(text) : 0) + '元'
      },
    },
    {
      title: '费用合计',
      dataIndex: 'trainingTotal',
      hideInSearch: true,
      render: (text) => {
        return (text != undefined ? formatNumber(text) : 0) + '元'
      },
    },
    {
      title: '协议开始日期',
      dataIndex: 'serviceStartTime',
      hideInSearch: true,
      render: (text) => {
        return text !== '-' ? moment(text).format('YYYY-MM-DD') : '';
      },
    },
    {
      title: '协议结束日期',
      dataIndex: 'serviceEndTime',
      hideInSearch: true,
      render: (text) => {
        return text !== '-' ? moment(text).format('YYYY-MM-DD') : '';
      },
    },
    {
      title: '协议状态',
      dataIndex: 'status',
      hideInSearch: true,
      valueEnum: {
        0: { text: protocolStatus[0].label, status: 'Default' },
        1: { text: protocolStatus[1].label, status: 'Processing' },
        2: { text: protocolStatus[2].label, status: 'Success' },
        3: { text: protocolStatus[3].label, status: 'Default' },
        4: { text: protocolStatus[4].label, status: 'Default' },
      },
    },
    {
      title: '协议地址',
      dataIndex: 'contractOssUrl',
      hideInSearch: true,
      ellipsis:true,
      width: 200,
      render: (text,record) =>{
        return <a href={record.contractOssUrl} target="_blank">查看协议</a>
      }
    },
  ];

  return (
    <PageHeaderWrapper>
      <ProTable
        search={false}
        actionRef={actionRef}
        rowKey="protocolId"
        request={(params) => queryProtocolList(params)}
        columns={columns}
      />
    </PageHeaderWrapper>
  )
}

export default connect(() => ({
}))(TableList)
